﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Untitled 1</title>
    <link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>

    <script type="text/javascript">
			$(function(){
			
				 //$("a.dwn").click(function(){ $("div.tabs").hide("slow"); });
				 //$("a.dwn").click(function(){ $("div.tabs").show("slow"); });
				//$("a.dwn").click(function(){$("div.tabs").toggle(); return false;});

				// Accordion
				$("#accordion").accordion({ header: "h3" });
	
				// Tabs
				$('#tabs').tabs();
	

				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 600,
					buttons: {
						"Ok": function() { 
							$(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				});
				
		
		
				$('#down_start').click(function(){
					 $.ajax({
					   type: "POST",
					   url: "default.html",
					   data: "action=Start",
					   /*success: function(){
					     alert( "Data Saved" );
					   }*/
					 });
				});
				$('#down_pause').click(function(){
					 $.ajax({
					   type: "POST",
					   url: "default.html",
					   data: "action=Pause",
					   /*success: function(){
					     alert( "Data Saved" );
					   }*/
					 });
				});

				$('#down_resume').click(function(){
					 $.ajax({
					   type: "POST",
					   url: "default.html",
					   data: "action=Stop",
					  /* success: function(){
					     alert( "Data Saved" );
					   }*/
					 });
				});

				$('#down_stop').click(function(){
					 $.ajax({
					   type: "POST",
					   url: "default.html",
					   data: "action=Remove",
					   /*success: function(){
					     alert( "Data Saved" );
					   }*/
					 });
				});





				// Datepicker
				$('#datepicker').datepicker({
					inline: true
				});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// Progressbar
				$("#progressbar").progressbar({
					value: 20 
				});
				
				//hover states on the static widgets
				$('#dialog_link,#down_stop,#down_resume,#down_start,#down_pause,#up_start,#up_stop,#ui_refresh,#files_refresh, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
			});
    </script>

    <style type="text/css">
        .toggler
        {
            width: 500px;
            height: 200px;
        }
        #button
        {
            padding: .5em 1em;
            text-decoration: none;
        }
        #effect
        {
            width: 240px;
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
        #effect h3
        {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
        #info
        {
            /*width: 240px;*/
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
        #info h3
        {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
        #linkg
        {
            /*width: 240px;*/
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
        #linkg h3
        {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
        #logger
        {
            /*width: 240px;*/
            height: 135px;
            padding: 0.4em;
            position: relative;
        }
        #logger h3
        {
            margin: 0;
            padding: 0.4em;
            text-align: center;
        }
        .ui-effects-transfer
        {
            border: 2px dotted gray;
        }
    </style>

    <script type="text/javascript">
	$(function() {
		//run the currently selected effect
		function runEffect(){
			//get effect type from 
			//var selectedEffect = $('#effectTypes').val();
			var selectedEffect = 'clip';
			
			//most effect types need no options passed by default
			var options = {};
			//check if it's scale, transfer, or size - they need options explicitly set
			if(selectedEffect == 'scale'){  options = {percent: 0}; }
			else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; }
			
			//run the effect
			//$("#effect").toggle(selectedEffect,options,500);
			$("#tabs").toggle(selectedEffect,options,500);
		};
		
		//set effect from select menu value
		//$("#button").click(function() {
		$("#dwn").click(function() {
			runEffect();
			return false;
		});

	});
    </script>

    <style type="text/css">
        /*demo page css*/body
        {
            font: 62.5% "Trebuchet MS" , sans-serif;
            margin: 50px;
        }
        .demoHeaders
        {
            margin-top: 2em;
        }
        #dialog_link
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #dialog_link span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #down_start
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #down_start span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #down_pause
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #down_pause span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #down_resume
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #down_resume span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #down_stop
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #down_stop span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #ui_refresh
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #ui_refresh span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #up_start
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #up_start span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #up_stop
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #up_stop span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        #files_refresh
        {
            padding: .4em 1em .4em 20px;
            text-decoration: none;
            position: relative;
        }
        #files_refresh span.ui-icon
        {
            margin: 0 5px 0 0;
            position: absolute;
            left: .2em;
            top: 50%;
            margin-top: -8px;
        }
        ul#icons
        {
            margin: 0;
            padding: 0;
        }
        ul#icons li
        {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        ul#icons span.ui-icon
        {
            float: left;
            margin: 0 4px;
        }
        body
        {
            margin: 0;
            padding: 0;
            border: 0;
            overflow: hidden;
            height: 100%;
            max-height: 100%;
        }
        #framecontent
        {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 200px; /*Width of frame div*/
            height: 100%;
            overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ /*background: navy;*/
            background-color: #fff;
            color: white;
        }
        #maincontent
        {
            position: fixed;
            top: 0px;
            left: 200px; /*Set left value to WidthOfFrameDiv*/
            right: 0;
            bottom: 0;
            overflow: auto;
            background: #fff;
        }
        .innertube
        {
            margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
        }
    </style>
</head>
<body>
    <!--[if lt IE 7]>
  <div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: relative;'>
    <div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div>
    <div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'>
      <div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div>
      <div style='width: 275px; float: left; font-family: Arial, sans-serif;'>
        <div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>You are using an outdated browser</div>
        <div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>For a better experience using this site, please upgrade to a modern web browser.</div>
      </div>
      <div style='width: 75px; float: left;'><a href='http://www.firefox.com' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div>
      <div style='width: 75px; float: left;'><a href='http://www.browserforthebetter.com/download.html' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div>
      <div style='float: left;'><a href='http://www.google.com/chrome' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div>
    </div>
  </div>
  <![endif]-->
    <div id="framecontent">
        <div class="innertube">
            <div id="accordion">
                <div>
                    <h3>
                        <a href="#" id="dwn">Downloads</a></h3>
                    <div>
                        Download Links 0<br />
                        Total Size: 0 B<br />
                        Progress: 0%<br />
                        ETA: 00:00:00</div>
                </div>
                <div>
                    <h3>
                        <a href="#">User information</a></h3>
                    <div>
                        Username:<br />
                        Traffic left:<br />
                        RapidPoints:<br />
                        Expiration date:</div>
                </div>
                <div>
                    <h3>
                        <a href="#">Link Grabber</a></h3>
                    <div>
                        Upload Container</div>
                </div>
                <div>
                    <h3>
                        <a href="#">Logger</a></h3>
                    <div>
                        Save as<br />
                        Send to analysis</div>
                </div>
            </div>
        </div>
    </div>
    <div id="maincontent">
        <div class="innertube">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Download</a></li>
                    <li><a href="#tabs-2">Upload</a></li>
                    <li><a href="#tabs-3">Files</a></li>
                </ul>
                <div id="tabs-1">
                    <p>
                        <a href="#" id="down_start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play">
                        </span>Start</a> <a href="#" id="down_pause" class="ui-state-default ui-corner-all">
                            <span class="ui-icon ui-icon-pause"></span>Pause</a> <a href="#" id="down_resume"
                                class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh"></span>
                                Resume</a> <a href="#" id="down_stop" class="ui-state-default ui-corner-all"><span
                                    class="ui-icon ui-icon-stop"></span>Stop</a></p>
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                <div id="tabs-2">
                    <p>
                        <a href="#" id="up_start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play">
                        </span>Start</a> <a href="#" id="up_stop" class="ui-state-default ui-corner-all"><span
                            class="ui-icon ui-icon-stop"></span>Stop</a></p>
                    <br />
                    Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
                    ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
                    bibendum.</div>
                <div id="tabs-3">
                    <p>
                        <a href="#" id="files_refresh" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh">
                        </span>Refresh</a></p>
                    <br />
                    Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
                    urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
                    ullamcorper augue.</div>
            </div>
            <div id="info" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">
                    User information</h3>
                    
               <p>
                
                    <a href="#" id="ui_refresh" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-refresh">
                    </span>Refresh</a></p>
                <br />
                
                    
                Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
                urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
                ullamcorper augue.
                </div>
            <div id="linkg" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">
                    Link Grabber</h3>
                <p>
                    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem
                    metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
                </p>
            </div>
            <div id="logger" class="ui-widget-content ui-corner-all">
                <h3 class="ui-widget-header ui-corner-all">
                    Logger</h3>
                <p>
                    Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem
                    metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
                </p>
            </div>
        </div>
        <!-- End demo-description -->
    </div>
</body>
</html>
